<template>
  <transition
    name="custom-classes-transition"
    enter-active-class="animated fadeInDown"
    leave-active-class="animated fadeOutUp"
  >

    <div class="modal-ctrl-body" v-if="addModalObj.isShow">
      <div class="modal-ctrl-main map-ctrl">
        <div class="modal-title">
          <p>新增安保线路信息</p>
        </div>
        <div class="modal-ctrl-content clear-false">

          <div class="map-body f-l">
            <lineMap
              :center=center
              :line-symbol-color=AddData.COLOR
              :line-symbol-width=lineSymbolWidth
              :line-symbol-style=lineSymbolStyle
              :paths="paths"
              :length="length"
              @graphicJSON=graphicJSON
            ></lineMap>
          </div>
          <div class="map-body f-l" :style="{right: openMapDataContentIsShow ? '0':'-640px'}">

            <div class="modal-row f-l" >
              <div class="modal-form-key f-l indispensable">
                名称：
              </div>
              <input type="text" maxlength="16" placeholder="最长16个字符" v-model="AddData.NAME" class="modal-text f-l">
            </div>

            <div class="modal-row f-l" >
              <div class="modal-form-key f-l indispensable">
                分类：
              </div>
              <select @change="selectTYPE" v-model="AddData.TYPE" class="modal-text">
                <option value="-1">选择分类</option>
                <option v-for="item in typeList" :value="item.targetMenuCode">{{ item.name }}</option>
              </select>
            </div>

            <div class="modal-row f-l" >
              <div class="modal-form-key f-l indispensable">
                起点：
              </div>
              <input v-model="AddData.START_POINT" maxlength="32" placeholder="最长32个字符" type="text" class="modal-text f-l">
            </div>

            <div class="modal-row f-l" >
              <div class="modal-form-key f-l indispensable">
                终点：
              </div>
              <input v-model="AddData.END_POINT" maxlength="32" placeholder="最长32个字符" type="text" class="modal-text f-l">
            </div>

            <div class="modal-row f-l" >
              <div class="modal-form-key f-l indispensable">
                所属单位：
              </div>
              <select @change="selectDistrict" v-model="AddData.DISTRICT" class="modal-text">
                <option value="-1">选择所属单位</option>
                <option v-for="item in areaList" :value="item.targetMenuCode">{{ item.name }}</option>
            <!--    <option value="CD">蔡甸</option>
                <option value="DH">东湖</option>
                <option value="DXH">东西湖</option>
                <option value="DX">东新</option>
                <option value="HY">汉阳</option>
                <option value="HS">洪山</option>
                <option value="HP">黄陂</option>
                <option value="JA">江岸</option>
                <option value="JH">江汉</option>
                <option value="JX">江夏</option>
                <option value="KFQ">开发区</option>
                <option value="QK">硚口</option>
                <option value="QS">青山</option>
                <option value="WC">武昌</option>
                <option value="XZ">新洲</option>-->
              </select>
            </div>
            <div class="modal-row f-l">
              <div class="modal-form-key f-l">
                线段颜色：
              </div>
              <div class=""></div>
              <input type="color" style="width: 60%;height: 30px;" v-model=AddData.COLOR>
           <!--   <input type="text" v-model=AddData.WIDTH>{{AddData.WIDTH}}
              <input type="text" v-model=AddData.WIDTH>{{AddData.WIDTH}}-->
            </div>

            <div class="modal-row f-l">
              <div class="modal-form-key f-l">
                线宽：
              </div>
              <div class="select-line-style-box f-l"  @click="clickSelectLine">
                <span>{{AddData.WIDTH}}</span>
                <ul class="select-line" v-show="selectLineIsShow">
                  <li v-for="line in selectLine" @click="selectLineStyle(line)" :value="line"></li>
                </ul>
              </div>
            </div>

            <div class="modal-row f-l" >
              <div class="modal-form-key f-l">
                备注：
              </div>
              <!--<input v-model="AddData.COMMENTS" type="text" class="modal-text f-l">-->
              <textarea v-model="AddData.COMMENTS" maxlength="100" class="modal-text f-l"></textarea>
            </div>

          </div>
          <div class="map-data-show"
               :style="{right: openMapDataContentIsShow ? '600px':'-40px'}"
               @click="openMapDataContent"
               title="录入地图信息"
          >
            <span class="glyphicon"
                  :class="{'glyphicon-chevron-left':!openMapDataContentIsShow,'glyphicon-chevron-right':openMapDataContentIsShow}">
            </span>
            <span class="glyphicon"
                  :class="{'glyphicon-chevron-left':!openMapDataContentIsShow,'glyphicon-chevron-right':openMapDataContentIsShow}">
            </span>
          </div>
        </div>
        <div class="btns text-r">
          <button type="button" class="btn btn-default" @click="close">取消</button>
          <button type="button" class="btn btn-info" @click="subBtn">确定</button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
    import lineMap from "../../map/lineMap/lineMap"
    export default {
        name: "AddCircuitModal",
        props:["addModalObj"],
        data(){
          return{
            center: [114.21868761726246, 30.584733852070247],
            data:[],
            lineSymbolColor: '#333333',
            lineSymbolWidth: '4',
            lineSymbolStyle: 'solid',
            objectId: null,
            searchObjectId: 0,
            paths: null,          // 图形的路径
            length: null,         // 距离
            selectLine:["dash_1","solid_2","solid_4","solid_6","solid_8"],
            selectLineIsShow: false,
            areaList:[],
            typeList:[],
            AddData:{
              NAME:"",//名称
              START_POINT:"",//起点
              END_POINT:"",//终点
              DISTRICT:"-1",//所属单位
              TYPE:"-1",//分类
              COLOR:"#333333",//线颜色
              WIDTH:"solid_4",//线宽
              MAP_CODE:"",//地图标识符 新增线路的objectID
              CREATE_USER:"",//创建人
              COMMENTS:"",//备注
            },
            setting : {
              data: {
                simpleData: {
                  enable: true
                },
              }
            },
            smallDisplayImg:"static/img/upicon.png",
            bigDisplayImg:"static/img/upicon.png",
            sectionTreeIShow:false,
            stationName:"",
            iconLis:[],
            selectObj:{
              bigSelect:false,
              smallSelect:false,
            },
            point:[114.21868761726246, 30.584733852070247],
            actionType:null,
            openMapDataContentIsShow :false
          }
        },
        components:{
          lineMap
        },
        created(){
          //获取所属地区
          this.getAreaList();
          this.getTypeList();
        },
        methods:{
          //提交
          subBtn(){
            //console.log(this.AddData);
            this.AddData.CREATE_USER = this.isLogin().userId;
           // return false;
            if( this.verifyForm.isNull(this.AddData.NAME) ){
              this.s_alert("名称不能为空！");
              return false;
            }else if( this.verifyForm.isNull(this.AddData.START_POINT) ){
              this.s_alert("起点不能为空！");
              return false;
            }else if( this.verifyForm.isNull(this.AddData.END_POINT) ){
              this.s_alert("终点不能为空！");
              return false;
            }else if( this.verifyForm.isNull(this.AddData.TYPE) ){
              this.s_alert("分类不能为空！");
              return false;
            }else if( this.verifyForm.isNull(this.AddData.DISTRICT) ){
              this.s_alert("所属单位不能为空！");
              return false;
            }else if( this.verifyForm.isNull(this.AddData.DISTRICT) ){
              this.s_alert("所属单位不能为空！");
              return false;
            }

            //新增线路地图
            if(this.data.length!==0){
              this.$axios({
                method: 'post',
                url: mapFeatureServer + '1/addFeatures', // 1 线 2 圈
                data: 'f=json&features='+JSON.stringify(this.data),
                headers: {"Content-Type": "application/x-www-form-urlencoded"}
              }).then( res => {
                this.AddData.MAP_CODE = res.data.addResults[0].objectId;
                //console.log(this.AddData.MAP_CODE);
                 //this.s_alert('新增成功'+this.objectId);
                //新增线路数据
                let paramsKey = [];
                let paramsValue = [];
                for( let kay in this.AddData ){
                  paramsKey.push(kay);
                  paramsValue.push(this.AddData[kay]);
                }
                //console.log(paramsKey);
                //console.log(paramsValue);
                let params ={
                  "columns": paramsKey,
                  "dataTypeCode": "pointresource",
                  "datas": paramsValue,
                  "tableName": "T_RES_SECURITY_ROUTE"
                };
                //console.log(params);
                this.$axios.post(this.HOST+"/base/save",params)
                  .then((data)=>{
                    //console.log(data);
                    if( data.data.success ){
                      this.s_alert("新增成功！");
                      this.s_logwrite("点位信息管理-安保线路管理","新增安保线路");
                      this.close();
                    }
                  })
                  .catch((err)=>{
                    //console.log(err);
                  })
              })
            }
            else {
              this.s_alert("请先画线");
            }

          },
          //获取所属地区
          getAreaList(){
            //POST /dictionary/{key}
           /* this.$axios.post(this.HOST+"/dictionary/area")
              .then(res=>{
                //console.log(res);
                this.areaList = res.data;

              })
              .catch(err=>{
                //console.log(err);
              })*/
            this.$axios.post(this.DotCtrl+"/mapDictionaryRelation/getRelationInfoList",{
              "parentMenuCode": "MAP_SSDW",
            })
              .then(res=>{
                /*   //console.log(1);
                   //console.log(res);*/
                let success = res.data;
                let list = [];
                for( let i=0;i<success.length;i++ ){
                  success[i].targetMenuCode = success[i].targetMenuCode.split("_")[1];
                  list.push(success[i]);
                }
                this.areaList = list;
                //console.log(this.areaList);
              })
              .catch(err=>{
                //console.log(err);
              })
          },
          //获取类型
          getTypeList(){
            //POST /dictionary/{key}
            this.$axios.post(this.DotCtrl+"/mapDictionaryRelation/getRelationInfoList",{
              "parentMenuCode": "MAP_ABXL",
            })
              .then(res=>{
                /*   //console.log(1);
                   //console.log(res);*/
                let success = res.data;
                let list = [];
                for( let i=0;i<success.length;i++ ){
                  success[i].targetMenuCode = success[i].targetMenuCode.split("_")[1];
                  list.push(success[i]);
                }
                this.typeList = list;
                //console.log(this.typeList);
              })
              .catch(err=>{
                //console.log(err);
              })
          },
          //关闭弹出
          close(){
            this.$emit("closeModal");
            this.clearData();
          },
          //清除缓存
          clearData(){
            this.AddData={
              NAME:"",//名称
              START_POINT:"",//起点
              END_POINT:"",//终点
              DISTRICT:"-1",//所属单位
              TYPE:"-1",//分类
              COLOR:"#333333",//线颜色
              WIDTH:"dash_1",//线宽
              MAP_CODE:"",//地图标识符
              CREATE_USER:"",//创建人
              COMMENTS:"",//备注
            };
            this.openMapDataContentIsShow = false;
          },
          //分类
          selectTYPE(ele){
            //console.log(ele.target.value);
            this.AddData.TYPE = ele.target.value;
          },
          //所属单位
          selectDistrict(ele){
            //console.log(ele.target.value);
            this.AddData.DISTRICT = ele.target.value;
          },
          //地图json
          graphicJSON(json){
            json.attributes["Name"] = 'name';
            this.data = [
              {
                "geometry": json.geometry,
                "attributes":json.attributes
              }
            ];
            //console.log(JSON.stringify(this.data))
          },

          //选择线样式
          selectLineStyle(style){
            ////console.log(style);
            this.AddData.WIDTH = style;
            let arrStyle = style.split("_");
            this.lineSymbolStyle = arrStyle[0];
            this.lineSymbolWidth = arrStyle[1];
            //console.log(arrStyle);
          },
          //选择线段隐藏与显示
          clickSelectLine(){
            this.selectLineIsShow = !this.selectLineIsShow
          },
          //展开地图数据录入界面
          openMapDataContent(){
            this.openMapDataContentIsShow = !this.openMapDataContentIsShow;
          }
        },
    }
</script>

<style scoped>
  .form-control{
    height: 100%;
    border: 1px solid #ccc;
  }
  .fadeInDown,.fadeOutUp{
    animation-duration: .500s;
  }
</style>
